import { Component, OnInit } from '@angular/core';
import mapboxgl from 'mapbox-gl';
import { EchartLayer, EchartObject } from './demo/echarts-layer';

mapboxgl.accessToken = 'pk.eyJ1IjoiY29uZ3lpbmcyIiwiYSI6ImNqNGM2dzNjcDA4ZmQzMnBzMW5ja3V6eGEifQ.OE7Uh14v_88OLyeawTi2Sg';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent implements OnInit {
  title = 'mapbox';
  constructor() { }
  map;
  option = {
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        }
      }
    ]
  };
  ngOnInit() {

    // const p = new EchartLayer('z1');
    // console.log(p);



    const monument = [118.9017159006, 32.1259503588];
    // const monument1 = [118.7925056100, 32.0889450500];
    this.map = new mapboxgl.Map({
      container: 'map', // div容器
      style: 'mapbox://styles/mapbox/light-v9',
      center: monument,
      zoom: 17, // starting zoom
    });
    // // create DOM element for the marker
    // const el = document.createElement('div');
    // el.id = 'marker';
    // el.style.height = '180px';
    // el.style.width = '180px';

    // const dot = document.createElement('div');
    // dot.id = 'dot';
    // dot.style.height = '180px';
    // dot.style.width = '180px';
    // // create the marker
    // new mapboxgl.Marker(el)
    //   .setLngLat(monument)
    //   .addTo(this.map);
    // new mapboxgl.Marker(dot)
    //   .setLngLat(monument1)
    //   .addTo(this.map);

    // const myecharts = echarts.init(document.getElementById('marker'));
    // myecharts.setOption(this.option);
    // const charts = echarts.init(document.getElementById('dot'));
    // charts.setOption(this.option);

    const data = [
    new EchartObject([118.9017159006, 32.1259503588], this.option),
    new EchartObject([118.7925056100, 32.0889450500], this.option)
    ];

    const echarlayer8888888 = new EchartLayer({ MinZoom: 10, MaxZoom: 16 }, data, this.map);
    echarlayer8888888.hide();
    echarlayer8888888.show();
    echarlayer8888888.setWidthHeight(180, 180);
  }




}

